import { TEXT_LAYOUT, TEXT_PAINT } from "./conf";

export const TEXT_MODES = ["draw_text"];

export function generateTextLayer({ map, mode, features }) {
	features.forEach((feature) => {
		feature.properties = {
			...TEXT_PAINT,
			...TEXT_LAYOUT,
			...feature.properties,
		};
	});

	const textLayer = {
		id: `${mode}-${features[0].id}-text`,
		type: "symbol",
		source: {
			type: "geojson",
			data: {
				type: "FeatureCollection",
				features,
			},
		},
		layout: {
			"text-field": ["get", "label"],
			"text-size": ["get", "size"],
			"text-rotate": ["get", "rotate"],
			// "text-offset": [0, 0.6],
			// "text-anchor": "top",
			// "text-font": ["Open Sans Regular"],
		},
		paint: {
			"text-color": ["get", "color"],
			"text-halo-color": ["get", "haloColor"],
			"text-halo-width": ["get", "haloWidth"],
		},
	};

	// const circleLayer = {
	//   id: `${mode}-${features[0].id}-circle`,
	//   type: "circle",
	//   source: {
	//     type: "geojson",
	//     data: {
	//       type: "FeatureCollection",
	//       features,
	//     },
	//   },
	//   filter: ["all", ["==", "invalid", "true"]],
	//   paint: {
	//     "circle-radius": 5, // DrawUtits.DefaultPointSize,
	//     "circle-color": "#fbb03b", // DrawUtits.DefaultPointColor,
	//   },
	// };

	map.addLayer(textLayer);
	// map.addLayer(circleLayer);

	return [textLayer.id];
}

export function isTextMode(mode) {
	return TEXT_MODES.includes(mode);
}
